<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-12-19 10:11:07
 * @LastEditors: 刘佳欢 2173558681@qq.com
 * @LastEditTime: 2025-09-27 17:12:28
-->
<!-- <template>
  <div>
    课程列表
  </div>
</template> -->

<!-- <template>
  <div>
    <h2>大学课程表</h2>
    <table border="1" cellpadding="10" cellspacing="0">
      <thead>
        <tr>
          <th>课程ID</th>
            <th>课程名称</th>
              <th>课程类型</th>
                <th>学分</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="course in courses" :key="course.id">
          <td>{{ course.id }}</td>
          <td>{{ course.name }}</td>
          <td>{{ course.type }}</td>
          <td>{{ course.credit }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      courses: [
        { id: 1, name: '数学分析', type: '必修', credit: 5 },
        { id: 1, name: '高等代数', type: '必修', credit: 4 },
        { id: 1, name: '解析几何', type: '必修', credit: 3 },
        { id: 1, name: '常微分方程', type: '必修', credit: 4 },
        { id: 2, name: '大学英语', type: '必修', credit: 1 },
        { id: 3, name: '计算机基础', type: '必修', credit: 1 },
        { id: 4, name: '欧洲音乐史', type: '选修', credit: 2 },
        { id: 5, name: '篮球', type: '选修', credit: 1 },
        { id: 6, name: 'JAVA编程', type: '选修', credit: 2 },
        { id: 7, name: '数学建模', type: '选修', credit: 2 },
        { id: 8, name: '数值分析', type: '选修', credit: 2 },
        { id: 9, name: '计算机网络', type: '选修', credit: 2 },
      ]
    };
  }
};
</script>

<style scoped>
table {
  width: 100%;
  text-align: center;
}

th {
  background-color: #f0f0f0;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}
</style> -->


<template>
  <div class="course-table-wrapper">
    <h2>大学课程表</h2>
    <!-- 表格容器，实现右侧滚动条 -->
    <div class="table-container">
      <table border="1" cellpadding="10" cellspacing="0">
        <thead>
          <tr>
            <th>课程ID</th>
            <th>课程名称</th>
            <th>课程类型</th>
            <th>学分</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="course in currentPageCourses" :key="course.id">
            <td>{{ course.id }}</td>
            <td>{{ course.name }}</td>
            <td>{{ course.type }}</td>
            <td>{{ course.credit }}</td>
          </tr>
          <tr v-if="currentPageCourses.length === 0">
            <td colspan="4">暂无课程数据</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页组件 -->
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
      <div class="page-size">
        <label>每页显示：</label>
        <select v-model="pageSize" @change="resetToFirstPage">
          <option value="5">5条</option>
          <option value="10">10条</option>
          <option value="15">15条</option>
        </select>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      courses: [
        { id: 1, name: '数学分析', type: '必修', credit: 5 },
        { id: 2, name: '高等代数', type: '必修', credit: 4 },
        { id: 3, name: '解析几何', type: '必修', credit: 3 },
        { id: 4, name: '常微分方程', type: '必修', credit: 4 },
        { id: 5, name: '大学英语', type: '必修', credit: 1 },
        { id: 6, name: '计算机基础', type: '必修', credit: 1 },
        { id: 7, name: '欧洲音乐史', type: '选修', credit: 2 },
        { id: 8, name: '篮球', type: '选修', credit: 1 },
        { id: 9, name: 'JAVA编程', type: '选修', credit: 2 },
        { id: 10, name: '数学建模', type: '选修', credit: 2 },
        { id: 11, name: '数值分析', type: '选修', credit: 2 },
        { id: 12, name: '计算机网络', type: '选修', credit: 2 },
        { id: 13, name: '数据库原理', type: '选修', credit: 3 },
        { id: 14, name: '数据结构与算法', type: '选修', credit: 2 },
        { id: 15, name: '马克思主义原理', type: '必修', credit: 2 },
        { id: 16, name: '中国近代史', type: '必修', credit: 3 },
        { id: 17, name: '离散数学', type: '必修', credit: 3 },
        { id: 18, name: '概率论与数理统计', type: '必修', credit: 4 }
      ],
      currentPage: 1,
      pageSize: 5
    };
  },
  computed: {
    currentPageCourses() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.courses.slice(startIndex, endIndex);
    },
    totalPages() {
      return Math.ceil(this.courses.length / this.pageSize);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    resetToFirstPage() {
      this.currentPage = 1;
    }
  }
};
</script>

<style scoped>
.course-table-wrapper {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.table-container {
  width: 100%;
  /* 右侧横向滚动条 */
  overflow-x: auto; 
  margin-bottom: 15px;
}

table {
  /* 内容多时出现滚动条 */
  min-width: 600px; 
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

th {
  background-color: #E6F7FF;
}

tr:nth-child(even) {
  background-color: #FFF9E6;
}

.pagination {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.page-size {
  display: flex;
  align-items: center;
  gap: 5px;
}

button {
  padding: 5px 10px;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
</style>